<template>
  <div style="height: 100%; overflow: auto;">
    <div class="resume-create">
      <div class="step-content">
        <el-steps :active=values space="400px" align-center>
          <el-step :title="item.title" :description="item.date" v-for="(item,index) in stepsData" :key="index">
          </el-step>
        </el-steps>
      </div>
      <div class="resume-content" v-if="values != 4">
        <div v-show="values == 1">
          <div class="title">个人信息</div>
          <el-form :model="formData" :rules="rules" ref="myinfo" label-width="0px" class="ms-content">
            <div class="form-box">
              <el-form-item prop="name" style="width: 100%; height: 100%;">
                <el-input v-model="formData.name" placeholder="姓名" maxlength="20">
                </el-input>
              </el-form-item>
            </div>
            <div class="d-flex gender">
              <div class="form-box flex-1 form-bg">
                <el-radio-group v-model="formData.sex">
                  <el-radio :label="1">男</el-radio>
                </el-radio-group>
              </div>
              <div style="width: 30px;"></div>
              <div class="form-box flex-1 form-bg">
                <el-radio-group v-model="formData.sex">
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="form-box  birth-date">
              <el-form-item prop="birthday" style="width: 100%; height: 100%;">
                <el-date-picker v-model="formData.birthday" type="date" placeholder="出生日期"
                  :picker-options="pickerOptions0" value-format="yyyy-MM-dd" style="width: 100%;" @blur='blur()'>
                </el-date-picker>
              </el-form-item>
              <div v-if="errorState" class="el-form-item__error">
                年龄未满16岁
              </div>
            </div>
            <div class="d-flex form-box">
              <div class="flex-1 pr20" style="height: 100%;">
                <el-form-item prop="workTime" style="width: 100%; height: 100%;">
                  <el-date-picker v-model="formData.workTime" type="date" placeholder="参加工作时间" value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions" :disabled="formData.notWorkExp == 1" style="width: 100%;">
                  </el-date-picker>
                </el-form-item>
              </div>
              <div style="width: 30px; height: 100%; background: #fff;"></div>
              <div class="experience form-bg" style="margin: 0;">
                <el-radio-group v-model="formData.notWorkExp">
                  <el-radio :label="1" @change="changeWorkExperience">无经验</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="form-box">
              <el-form-item prop="mail" style="width: 100%; height: 100%;">
                <el-input v-model="formData.mail" placeholder="电子邮箱" maxlength="20"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div v-show="values == 2">
          <div class="title">教育经历</div>
          <el-form :model="formData.resumeEducationInVo" :rules="rules" ref="resumeEducationInVo" label-width="0px"
            class="ms-content">
            <div class="form-box">
              <el-form-item prop="school" style="width: 100%; height: 100%;">
                <el-input v-model="formData.resumeEducationInVo.school" placeholder="学校名称" maxlength="20"></el-input>
              </el-form-item>
            </div>
            <div class="form-box">
              <el-form-item prop="education" style="width: 100%; height: 100%;">
                <el-select v-model="formData.resumeEducationInVo.education" placeholder="学历"
                  style="width: 100%; height: 100%;">
                  <el-option v-for="item in this.dict.education" :key="item.val" :label="item.name" :value="item.val">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="form-box">
              <el-form-item prop="major" style="width: 100%; height: 100%;">
                <el-input v-model="formData.resumeEducationInVo.major" placeholder="所学专业" maxlength="20"></el-input>
              </el-form-item>
            </div>
            <div class="form-box">
              <div style="width: 105px; height: 100%; overflow: hidden;">
                <el-form-item prop="startTime" style="width: 100%; height: 100%;">
                  <el-date-picker v-model="formData.resumeEducationInVo.startTime" type="date"
                    :picker-options="startTimePicker0" placeholder="开始日期">
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class='fenge'></div>
              <div style="width: 105px; height: 100%; overflow: hidden;">
                <el-form-item prop="endTime" style="width: 100%; height: 100%;">
                  <el-date-picker v-model="formData.resumeEducationInVo.endTime" type="date"
                    :picker-options="endTimePicker" :disabled="formData.resumeWorkInVo.toDay == 1" placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class="experience form-bg">
                <el-radio-group v-model="formData.resumeEducationInVo.toDay">
                  <el-radio :label="1" @change="changeToday('rules')">至今</el-radio>
                </el-radio-group>
              </div>
            </div>
          </el-form>
        </div>
        <div v-show="values == 3">
          <div class="title">工作经验</div>
          <el-form :model="formData.resumeWorkInVo" :rules="workrules" ref="resumeWorkInVo" label-width="0px"
            class="ms-content">
            <div class="d-flex gender" v-if="formData.notWorkExp">
              <div class="form-box flex-1 form-bg">
                <el-radio-group v-model="formData.resumeWorkInVo.hasWorkTime">
                  <el-radio :label="1">有实习经验</el-radio>
                </el-radio-group>
              </div>
              <div style="width: 30px;"></div>
              <div class="form-box flex-1 form-bg">
                <el-radio-group v-model="formData.resumeWorkInVo.hasWorkTime">
                  <el-radio :label="2">暂无实习经验</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div v-if="formData.resumeWorkInVo.hasWorkTime == 1 || !formData.notWorkExp">
              <div class="form-box">
                <el-form-item prop="company" style="width: 100%; height: 100%;">
                  <el-input v-model="formData.resumeWorkInVo.company" placeholder="公司名称" maxlength="20"></el-input>
                </el-form-item>
              </div>
              <div class="form-box">
                <el-form-item prop="trade" style="width: 100%; height: 100%;">
                  <el-select v-model="formData.resumeWorkInVo.trade" placeholder="所属行业"
                    style="width: 100%; height: 100%;">
                    <el-option v-for="item in this.dict.tradeCategory" :key="item.id" :label="item.name"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="form-box">
                <el-form-item prop="job" style="width: 100%; height: 100%;">
                  <el-input v-model="formData.resumeWorkInVo.job" placeholder="职位名称" maxlength="20"></el-input>
                </el-form-item>
              </div>
              <div class="form-box">
                <div style="width: 105px; height: 100%; overflow: hidden;">
                  <el-form-item prop="startTime" style="width: 100%; height: 100%;">
                    <el-date-picker v-model="formData.resumeWorkInVo.startTime" type="date"
                      :picker-options="startTimePicker" placeholder="开始日期">
                    </el-date-picker>
                  </el-form-item>
                </div>
                <div class='fenge'></div>
                <div style="width: 105px; height: 100%; overflow: hidden;">
                  <el-form-item prop="endTime" style="width: 100%; height: 100%;">
                    <el-date-picker v-model="formData.resumeWorkInVo.endTime" type="date"
                      :picker-options="endTimePicker" :disabled="formData.resumeWorkInVo.toDay == 1" placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                </div>
                <div class="experience form-bg">
                  <el-radio-group v-model="formData.resumeWorkInVo.toDay">
                    <el-radio :label="1" @change="changeToday('workrules')">至今</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="form-box">
                <el-form-item prop="preTaxWage" style="width: 100%; height: 100%;">
                  <el-input v-model.number="formData.resumeWorkInVo.preTaxWage" placeholder="税前月薪"
                    onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" @input="numberChange($event)"
                    @change="numberChange($event)" maxlength="7"></el-input>
                </el-form-item>
              </div>
              <div class="form-box evaluation">
                <el-form-item prop="remark" style="width: 100%; height: 100%;">
                  <el-input type="textarea" placeholder="工作描述 " v-model="formData.resumeWorkInVo.remark" maxlength="500"
                    show-word-limit class="textarea">
                  </el-input>
                </el-form-item>
              </div>
            </div>
            <div class="title" style="margin-top: 44px;">求职意向</div>
            <div class="job-intention">
              <el-radio-group v-model="formData.resumeWorkInVo.workMode" class="d-flex" @change="changeWorkMode">
                <div class="form-box flex-1 form-bg">
                  <el-radio :label="1">全职</el-radio>
                </div>
                <div style="width: 20px;"></div>
                <div class="form-box flex-1 form-bg">
                  <el-radio :label="2">兼职</el-radio>
                </div>
                <div style="width: 20px;"></div>
                <div class="form-box flex-1 form-bg">
                  <el-radio :label="3">实习</el-radio>
                </div>
              </el-radio-group>
            </div>
            <div class="form-box">
              <el-form-item prop="currentStatus" style="width: 100%; height: 100%;">
                <el-select v-model="formData.resumeWorkInVo.currentStatus" placeholder="求职状态"
                  style="width: 100%; height: 100%;">
                  <el-option v-for="item in this.dict.currentStatus" :key="item.val" :label="item.name"
                    :value="item.val">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="form-box">
              <el-form-item prop="workPlace" style="width: 100%; height: 100%;">
                <el-select v-model="formData.resumeWorkInVo.workPlace" placeholder="期望地点"
                  style="width: 100%; height: 100%;" multiple :multiple-limit="3">
                  <el-option v-for="item in this.dict.workPlace" :key="item.val" :label="item.name" :value="item.val">
                  </el-option>
                </el-select>
                <!-- <el-cascader :options="this.dict.street" multiple  multiple-limit="3" v-model="formData.workPlace" placeholder="期望地点" style="width: 100%; height: 100%;"></el-cascader> -->
              </el-form-item>
            </div>
            <div class="form-box">
              <div class="job-target-edit__panel" @click="esitTag">
                <div class="panel-input">
                  <template v-if="!industryData.length"><b>期望行业</b></template>
                  <template v-if="industryData.length">
                    <span class="panel-input__item" v-for="item in industryData" :key="item.id">
                      {{item.name}}
                      <i class="panel-input__close">×</i>
                    </span>
                  </template>
                </div>
              </div>
              <!-- <el-form-item prop="hopeTrade" style="width: 100%; height: 100%;">
                             <el-select v-model="formData.resumeWorkInVo.hopeTrade" placeholder="期望行业" style="width: 100%; height: 100%;">
                                <el-option
                                v-for="item in this.dict.hopeTrade"
                                :key="item.val"
                                :label="item.name"
                                :value="item.val"
                                 multiple  multiple-limit="3">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
            </div>
            <div class="form-box">
              <div class="job-target-edit__panel" @click="esitTag">
                <div class="panel-input">
                  <template v-if="!categoryData.length"><b>期望职类</b></template>
                  <template v-if="categoryData.length">
                    <span class="panel-input__item" v-for="item in categoryData" :key="item.id">
                      {{item.name}}
                      <i class="panel-input__close">×</i>
                    </span>
                  </template>
                </div>
              </div>
            </div>
            <div class="form-box">
              <el-form-item prop="hopeWage" style="width: 100%; height: 100%;">
                <el-input v-model="formData.resumeWorkInVo.hopeWage" placeholder="期望月薪"
                  onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" @input="numberChange($event)"
                  @change="numberChange($event)">
                </el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="d-flex">
          <div class="flex-1" v-if="values > 0 && values < 3">
            <el-button type="primary" style="width: 100%; height: 44px; margin-top: 45px;" @click="next">下一步</el-button>
          </div>
          <div style="width: 30px;" v-if="values > 1 && values < 3"></div>
          <div class="flex-1" v-if="values > 1">
            <el-button type="primary" style="width: 100%; height: 44px; margin-top: 45px;" @click="pre">上一步</el-button>
          </div>
          <div style="width: 30px;" v-if="values > 1 && values == 3"></div>
          <div class="flex-2" v-if="values > 2">
            <el-button type="primary" style="width: 100%; height: 44px; margin-top: 45px;" @click="next">完成</el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-show="values == 4" class="succ-result">
      <!-- <div class="d-flex result">
                <div class="d-flex">
                    <div><img src="../../assets/img/resume/createResume-icon.png" /></div>
                    <div class="flex-1" style="margin-left: 20px;">
                        <p class="tips1">恭喜您，简历创建完成!您可以申请职位了~</p>
                        <p class="tips2">继续完善简历，提高求职竞争力</p>
                        <p class="backhome">返回首页</p>
                    </div>
                </div>
            </div>
            <div class="d-flex opt">
                <div>
                    <span>根据求职意向为您推荐 </span>
                    <el-checkbox v-model="checkAll" @change="handleCheckAllChange" style="margin-left: 20px;">全选</el-checkbox>
                    <el-button type="primary" style="margin-left: 20px;">一键申请</el-button>
                </div>
            </div>
            <div class="company_position">
                <div class="company_position_info" v-for="(item,index) in workList" :key="index">
                    <div class="job_logo"></div>
                    <div class="d-flex align-items">
                        <div class="job_information">
                            <p>人事专员</p>
                            <p>大专|1-3年</p>
                            <p>湖南赛琳科技股份有限公司</p>
                        </div>
                    </div>
                    <div class="job_salary">
                        <div>40K-60K</div>
                        <div class="d-flex checkbox">
                            <input type="checkbox" id="checkbox" v-model="item.checked" @click="CheckItem(item)">
                        </div>
                    </div>
                </div>
            </div>
            <div class="seeMore">查看更多</div>
            <div class="seeMore" v-if="false">暂无职位，请关注招聘会现场</div> -->
    </div>
    <!-- 设置公司标签组件 -->
    <Cascader-Multiple :esitTagBoolean="esitTagBoolean" @close="close" @confirmHaveTag="confirmHaveTag"
      :select='dict.tradeCategory'></Cascader-Multiple>
  </div>
</template>

<script>
import {
  createResume,
  // getResume
} from '../../api/index';
// 设置公司标签组件
import CascaderMultiple from './components/CascaderMultiple'
export default {
  components: {
    CascaderMultiple
  },
  data () {
    return {
      // 添加公司标签 显示隐藏
      esitTagBoolean: false,
      cascaderType: 1,//几级集联动
      selectData: [],//联动数据
      industryData: [],//行业数据
      categoryData: [],//职类数据
      errorState: false, //验证出生日期
      // 出生日期 限制可选时间段
      pickerOptions0: {
        disabledDate (time) {
          // let curDate = (new Date()).getTime();
          // let disBeforDate = 16 * 12 * 30 * 24 * 3600 * 1000;
          // let beforMonths = curDate - disBeforDate;
          // return time.getTime() > Date.now() || time.getTime() < beforMonths;
          return time.getTime() > Date.now();
        }
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        }
      },
      // start 开始时间小于今天,结束时间不能大于开始时间
      startTimePicker0: {
        disabledDate: time => {
          if (this.formData.resumeEducationInVo.endTime) {
            return (
              time.getTime() > new Date(this.formData.resumeEducationInVo.endTime).getTime()
            );
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
      endTimePicker0: {
        disabledDate: time => {
          if (this.formData.resumeEducationInVo.startTime) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() < new Date(this.formData.resumeEducationInVo.startTime).getTime()
            );
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
      startTimePicker: {
        disabledDate: time => {
          if (this.formData.resumeWorkInVo.endTime) {
            return (
              time.getTime() > new Date(this.formData.resumeWorkInVo.endTime).getTime()
            );
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
      endTimePicker: {
        disabledDate: time => {
          if (this.formData.resumeWorkInVo.startTime) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() < new Date(this.formData.resumeWorkInVo.startTime).getTime()
            );
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
      stepsData: [{
        title: '个人信息'
      },
      {
        title: '教育经历'
      },
      {
        title: '工作经验'
      },
      {
        title: '注册成功'
      }
      ],
      formData: {
        /**
         * 姓名
         */
        name: '',

        /**
         * 身份证号
         */
        idCard: '',

        /**
         * 出生日期
         */
        birthday: '',

        /**
         * 性别
         */
        sex: 1,

        /**
         * 照片
         */
        photo: '',

        /**
         * 民族
         */
        nation: '',

        /**
         * 婚姻状况
         */
        maritalStatus: '',

        /**
         * 政治面貌
         */
        politicalStatus: '',

        /**
         * 户籍所在地
         */
        domicilePlace: '',

        /**
         * 现居住地
         */
        currentResidence: '',

        /**
         * 身高
         */
        height: '',

        /**
         * 体重
         */
        weight: '',

        /**
         * 视力
         */
        vision: '',

        /**
         * 职称级别
         */
        titleLevel: '',

        /**
         * 工作经验
         */
        workExp: false,

        /**
         * 参加工作时间
         */
        workTime: '',

        /**
         * 1：true是，2:false无
         */

        notWorkExp: 0,

        /**
         * 工作描述
         */

        remark: '',
        /**
         * 学历
         */
        education: '',

        /**
         * 专业
         */
        major: '',

        /**
         * 手机号码
         */
        phone: '',

        /**
         * 电子邮箱
         */
        mail: '',

        /**
         * qq
         */
        qq: '',

        /**
         * 微信
         */
        wechat: '',

        /**
         * 通信地址
         */
        mailingAddress: '',

        /**
         * 个人主页
         */
        homepage: '',

        /**
         * 目前状态
         */
        currentStatus: '',

        /**
         * 期望职位
         */
        hopeJob: '',

        /**
         * 期望行业
         */
        hopeTrade: '',

        /**
         * 工作地点
         */
        workPlace: '',

        /**
         * 工作方式
         */
        workMode: 1,

        /**
         * 期望薪资
         */
        hopeWage: '',

        /**
         * 是否需要技能培训
         */
        needTrain: '',

        /**
         * 兴趣爱好
         */
        interest: '',

        /**
         * 自我评价
         */
        evaluation: '',

        /**
         * 完整度
         */
        integrity: '',

        /**
         * 公开程度：1.对所有公开，2.完全保密
         */
        publicity: '',

        /**
         * 是否快速投递 1:true是，2:false否
         */
        express: '',

        /**
         * 刷新时间
         */
        refreshTime: '',

        /**
         * 到期时间
         */
        expireTime: '',

        /**
         * 审核状态：0.待审核，1.通过，2.未通过
         */
        auditStatus: '',

        /**
         * 照片审核状态：0.待审核，1.通过，2.未通过
         */
        photoAuditStatus: '',

        /**
         *简历流程步骤:2.第一步，3.第二步，4.第三步，1.第一份简历
         */
        step: '',

        /**
         * 点击数
         */
        hits: '',
        resumeWorkInVo: {
          /**
           * 是否有实习经验
           */
          hasWorkTime: 1,
          /**
           * 简历id
           */
          resumeId: '',

          /**
           * 公司名称
           */
          company: '',

          /**
           * 所属行业
           */
          trade: '',

          /**
           * 职位名称
           */
          job: '',

          /**
           * 职位类别
           */
          jobCategory: '',

          /**
           * 工作开始时间
           */
          startTime: '',

          /**
           * 工作结束时间
           */
          endTime: '',

          /**
           * 是否至今：1：true是，2：false否
           */
          toDay: false,
          /**
           * 目前状态
           */
          currentStatus: '',

          /**
           * 期望职位
           */
          hopeJob: '',

          /**
           * 期望行业
           */
          hopeTrade: '',
          // 期望月薪
          hopeWage: '',
          remark: '',
          // 求职意向
          workMode: 1,
          // 期望地点
          workPlace: '',
          // 税前月薪
          preTaxWage: ''
        },
        resumeEducationInVo: {
          /**
           * 毕业院校
           */
          school: '',

          /**
           * 学历
           */
          education: '',

          /**
           * 专业类别
           */
          majorCategory: '',

          /**
           * 所学专业
           */
          major: '',

          /**
           * 开始时间
           */
          startTime: '',

          /**
           * 结束时间
           */
          endTime: '',
          //startendTime: [],
          /**
           * 是否至今：true是，false否
           */

          toDay: false
        }

      },
      rules: {
        name: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        birthday: [{
          required: true,
          message: '请选择日期',
          trigger: 'blur'
        }],
        workTime: [{
          required: true,
          message: '请选择日期',
          trigger: 'blur'
        }],
        mail: [{
          validator: this.checkEmail,
          trigger: 'blur'
        }],
        school: [{
          required: true,
          message: '请输入学校名称',
          trigger: 'blur'
        }],
        education: [{
          required: true,
          message: '请选择学历',
          trigger: 'change'
        }],
        majorCategory: [{
          required: true,
          message: '请输入所学专业',
          trigger: 'blur'
        }],
        startendTime: [{
          required: true,
          message: '请选择日期',
          trigger: 'blur'
        }],
        company: [{
          required: true,
          message: '请输入公司名称',
          trigger: 'blur'
        }],
        trade: [{
          required: true,
          message: '请选择所属行业',
          trigger: 'blur'
        }],
        job: [{
          required: true,
          message: '请职位名称',
          trigger: 'blur'
        }],
        startTime: [{
          required: true,
          message: '开始时间',
          trigger: 'blur'
        }],
        endTime: [{
          required: true,
          message: '结束时间',
          trigger: 'change'
        }],
        remark: [{
          required: true,
          message: '请输入工作描述',
          trigger: 'blur'
        }],
        currentStatus: [{
          required: true,
          message: '请选择求职状态',
          trigger: 'change'
        }],
        workPlace: [{
          required: true,
          message: '请选择期望地点',
          trigger: 'blur'
        }],
        hopeWage: [{
          required: true,
          message: '请输入期望月薪',
          trigger: 'blur'
        }]
      },
      workrules: {
        company: [{
          required: true,
          message: '请输入公司名称',
          trigger: 'blur'
        }],
        trade: [{
          required: true,
          message: '请选择所属行业',
          trigger: 'blur'
        }],
        job: [{
          required: true,
          message: '请职位名称',
          trigger: 'blur'
        }],
        startTime: [{
          required: true,
          message: '开始时间',
          trigger: 'blur'
        }],
        endTime: [{
          required: true,
          message: '结束时间',
          trigger: 'change'
        }],
        remark: [{
          required: true,
          message: '请输入工作描述',
          trigger: 'blur'
        }],
        currentStatus: [{
          required: true,
          message: '请选择求职状态',
          trigger: 'change'
        }],
        workPlace: [{
          required: true,
          message: '请选择期望地点',
          trigger: 'blur'
        }],
        hopeWage: [{
          required: true,
          message: '请输入期望月薪',
          trigger: 'blur'
        }],
        preTaxWage: [{
          required: true,
          message: '请输入税前月薪',
          trigger: 'blur'
        }],
        workPlace: [{
          required: true,
          message: '请输入期望地点',
          trigger: 'blur'
        }],
        hopeTrade: [{
          required: true,
          message: '请输入期望行业',
          trigger: 'blur'
        }],
        hopeJob: [{
          required: true,
          message: '请输入期望职类',
          trigger: 'blur'
        }]
      },
      // 各种字典
      dict: {},
      tagArrs: '',
      // step
      values: 3,
      // 全选
      checkAll: false,
      workList: [{
        checked: true
      },
      {
        checked: false
      },
      {
        checked: true
      },
      {
        checked: true
      }
      ]
    };
  },
  mounted () {
    // console.log(this.formData.notWorkExp);
    this.rules.workTime[0].required = this.formData.workExp;
    this.getResume();
  },
  methods: {
    // 添加标签
    esitTag () {
      this.esitTagBoolean = true;
    },
    // 关闭弹框
    close (val) {
      this.esitTagBoolean = val
      this.jobSelectionBoolean = val
    },
    confirmHaveTag (valTag, val) {
      // console.log(valTag, 1111111111111111111)
      this.close(false)
      this[val] = valTag;
    },
    getResume () {
      getResume().then(res => {
        // console.log(res);
        if (res.code == 200) {
          let _this = this;
          _this.formData = res.data.resumeOutVo;
          _this.formData.resumeEducationInVo = res.data.resumeOutVo.resumeEducationOutVo[0];
          _this.formData.resumeWorkInVo = res.data.resumeOutVo.resumeWorkOutVo[0];
          console.log(_this.formData);
          _this.values = res.data.resumeOutVo.step - 1;
        }
      });
    },
    blur () {

      var checkArr = this.formData.birthday.split('-');
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      };
      if (checkArr[0] > year - 16) {
        this.errorState = true;
      } else if (checkArr[1] > month) {
        this.errorState = true;
      } else if (checkArr[2] > day) {
        this.errorState = true;
      } else {
        this.errorState = false;
      };
      /* if (this.errorState) {
       this.formData.birthday = '';
     }; */

    },
    // 薪资最大5000000
    numberChange (val) {
      if (val > 5000000) val = 5000000;
      this.formData.name = val;
    },
    changeWorkExperience () {
      // console.log(this.formData.notWorkExp);
      if (this.formData.notWorkExp) {
        this.rules.workTime[0].required = false;
      }
    },
    changeWorkMode () {
      if (this.formData.notWorkExp) {
        this.rules.workTime[0].required = !this.formData.workExp;
      }
    },
    changeToday (item) {
      this[item].endTime[0].required = false;
    },
    // 邮箱格式校验
    checkEmail (rule, value, callback) {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    },
    newDate (date) {
      var d = new Date(date);
      console.log(d);
      let month = d.getMonth() + 1;
      let day = d.getDate();
      if (month < 10) {
        month = '0' + month;
      }
      if (day < 10) {
        day = '0' + day;
      }
      return d.getFullYear() + '-' + month + '-' + day;
    },
    next () {
      // if  () {}
      let refs;
      switch (this.values) {
        case 1:
          refs = 'myinfo';
          break;
        case 2:
          refs = 'resumeEducationInVo';
          break;
        case 3:
          refs = 'resumeWorkInVo';
          break;
        default:
      }
      if (this.formData.birthday == '') {
        this.errorState = false;
      };
      this.$refs[refs].validate(valid => {
        if (valid) {
          let dataParams = {};
          switch (this.values) {
            case 1:
              dataParams.name = this.formData.name;
              dataParams.sex = this.formData.sex;
              if (!this.formData.notWorkExp) {
                dataParams.workTime = this.formData.workTime;
              };

              dataParams.birthday = this.formData.birthday;
              dataParams.notWorkExp = this.formData.notWorkExp;
              dataParams.mail = this.formData.mail;
              dataParams.step = 2;
              break;
            case 2:

              const obj = {};
              dataParams.resumeEducationInVo = [];
              obj.school = this.formData.resumeEducationInVo.school;
              obj.education = this.formData.resumeEducationInVo.education;
              obj.major = this.formData.resumeEducationInVo.major;
              obj.startTime = this.newDate(this.formData.resumeEducationInVo.startTime);
              if (!this.formData.resumeEducationInVo.toDay) {
                obj.endTime = this.newDate(this.formData.resumeEducationInVo.endTime);
              }
              // resumeWorkInVoobj.endTime = this.newDate(this.formData.resumeWorkInVo.endTime);
              obj.toDay = this.formData.resumeEducationInVo.toDay;
              dataParams.resumeEducationInVo.push(obj);
              dataParams.step = 3;
              break;
            case 3:
              const resumeWorkInVoobj = {};
              dataParams.resumeWorkInVo = [];
              if (this.formData.notWorkExp) {
                resumeWorkInVoobj.hasWorkTime = this.formData.resumeWorkInVo.hasWorkTime;
              }
              resumeWorkInVoobj.company = this.formData.resumeWorkInVo.company;
              resumeWorkInVoobj.trade = this.formData.resumeWorkInVo.trade;
              resumeWorkInVoobj.job = this.formData.resumeWorkInVo.job;
              resumeWorkInVoobj.startTime = this.newDate(this.formData.resumeWorkInVo.startTime);
              if (!this.formData.resumeWorkInVo.toDay) {
                resumeWorkInVoobj.endTime = this.newDate(this.formData.resumeWorkInVo.endTime);
              }
              // resumeWorkInVoobj.endTime = this.newDate(this.formData.resumeWorkInVo.endTime);
              resumeWorkInVoobj.toDay = this.formData.resumeWorkInVo.toDay;
              // resumeWorkInVoobj.hopeWage = this.formData.resumeWorkInVo.hopeWage;
              resumeWorkInVoobj.remark = this.formData.resumeWorkInVo.remark;
              // resumeWorkInVoobj.currentStatus = this.formData.resumeWorkInVo.currentStatus;
              resumeWorkInVoobj.preTaxWage = this.formData.resumeWorkInVo.preTaxWage;
              // resumeWorkInVoobj.hopeJob = this.formData.resumeWorkInVo.hopeJob || [1, 2, 3];
              // resumeWorkInVoobj.workPlace = this.formData.resumeWorkInVo.workPlace || [1, 2, 3];
              // resumeWorkInVoobj.hopeTrade = this.formData.resumeWorkInVo.hopeTrade || [1, 2, 3];
              dataParams.resumeWorkInVo.push(resumeWorkInVoobj);
              dataParams.step = 4;


              var arr1 = [];
              this.categoryData.forEach(function (i) {
                console.log(i)
                arr1.push(i.code)
              });
              dataParams.hopeJob = arr1;
              var arr2 = [];
              this.industryData.forEach(function (i) {
                arr2.push(i.code)
              });
              dataParams.hopeTrade = arr2;
              dataParams.workPlace = this.formData.resumeWorkInVo.workPlace;
              dataParams.hopeWage = this.formData.resumeWorkInVo.hopeWage;
              dataParams.currentStatus = this.formData.resumeWorkInVo.currentStatus;
              dataParams.workMode = this.formData.resumeWorkInVo.workMode;
              // return;
              break;
            default:
          }
          console.log(dataParams);
          createResume(dataParams).then(res => {
            // console.log(res);
            if (res.code == 200) {
              this.dict = res.data;

              if (this.values++ > 3) this.values = 4;
              alert(this.values)
            }
          });
        }

        // if (valid) {
        //     this.$message.success('登录成功');
        //     localStorage.setItem('ms_username', this.param.username);
        //     this.$router.push('/');
        // } else {
        //     this.$message.error('请输入账号和密码');
        //     console.log('error submit!!');
        //     return false;
        // }
      });
    },
    pre () {
      if (this.values-- == 1) return;
    },
    // complete () {
    //     this.values = 4;
    // },
    handleCheckAllChange (val) {
      this.workList.forEach(items => {
        if (this.checkAll) {
          items.checked = true;
        } else {
          items.checked = false;
        }
      })
    },
    CheckItem (item) {
      // console.log(item);
      item.checked = !item.checked;
      console.log(this.workList);
      let arr = [];
      this.workList.forEach(items => {
        if (items.checked) {
          arr.push(items.checked);
        }
        if (arr.length == this.workList.length) {
          this.checkAll = true;
        } else {
          this.checkAll = false;
        }
      })
    }
  }
};
</script>

<style scoped>
.resume-content /deep/ .el-input {
    height: 100%;
}

.resume-content /deep/ .el-input__inner {
    border: none;
    background: rgba(246, 246, 248, 1);
    height: 100%;
}

.resume-create {
    width: 540px;
    margin: 0 auto;
}

.step-content {
    padding: 0 75px;
    margin: 45px 0;
}

.resume-content {
    min-height: 581px;
    background: rgba(255, 255, 255, 1);
    padding: 60px 90px;
}

.title {
    height: 28px;
    font-size: 20px;
    font-weight: 600;
    line-height: 22px;
    color: rgba(34, 34, 34, 1);
}

.experience {
    line-height: 44px;
    height: 100%;
    width: 100px;
    margin-left: 20px;
}

.experience /deep/ .el-radio-group {
    width: 100%;
}

.experience /deep/ .el-radio {
    width: 100%;
}

.experience /deep/ .el-radio__input {
    width: 30px;
    float: right;
    padding-left: 15px;
}

.experience /deep/ .el-radio__label {
    width: 30px;
    float: left;
    padding-left: 15px;
}

.form-box /deep/ .el-range-input {
    background: rgba(248, 248, 248, 1);
}

.form-box /deep/ .el-range-separator {
    line-height: 37px;
}

.form-box /deep/ .el-form-item__content {
    height: 100%;
}

.resume-content .gender /deep/ .el-radio-group {
    width: 100%;
}

.resume-content .gender /deep/ .el-radio {
    width: 100%;
}

.resume-content .gender /deep/ .el-radio__input {
    width: 30px;
    float: right;
    padding-left: 15px;
}

.resume-content .gender /deep/ .el-radio__label {
    width: 30px;
    float: left;
    padding-left: 15px;
}

.resume-content .job-intention /deep/ .el-radio-group {
    width: 100%;
}

.resume-content .job-intention /deep/ .el-radio {
    width: 100%;
}

.resume-content .job-intention /deep/ .el-radio__input {
    width: 35px;
    float: right;
    padding-left: 15px;
}

.resume-content .job-intention /deep/ .el-radio__label {
    width: 35px;
    float: left;
    padding-left: 15px;
}

.form-box {
    width: 100%;
    height: 45px;
    margin-top: 45px;
    /* background:rgba(246,246,248,1); */
    align-items: center;
    display: flex;
}

.birth-date {
    position: relative;
}

.job-target-edit__panel {
    /* height: 36px; */
    /* padding: 6px 7px 10px; */
    width: 100%;
    height: 100%;
    vertical-align: middle;
    cursor: pointer;
    background: rgba(246, 246, 248, 1);
    border-radius: 0;
    position: relative;
}

.job-target-edit__panel .panel-input {
    height: 100%;
    vertical-align: middle;
    padding: 6px 7px 10px;
}

.job-target-edit__panel b {
    font-size: 13px;
    font-weight: normal;
    color: #ccc;
    margin-left: 8px;
    line-height: 30px;
}

.job-target-edit__panel .panel-input__item {
    display: inline-block;
    border: 1px solid #e9eaec;
    border-radius: 3px;
    background: #f7f7f7;
    font-size: 12px;
    opacity: 1;
    cursor: pointer;
    margin-right: 5px;
    vertical-align: middle;
    color: #495060;
    max-width: 180px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    padding: 2px 19px 2px 8px;
    margin-top: 5px;
}

.workMode,
.evaluation {
    height: 100%;
}

.form-box .fenge {
    width: 18px;
    height: 0px;
    border: 1px solid rgba(204, 204, 204, 1);
    opacity: 1;
    margin: 0 10px;
}

.form-box /deep/ .el-textarea__inner {
    height: 166px;
    background: rgba(248, 248, 248, 1);
    opacity: 1;
    border-radius: 4px;
}

.form-bg {
    background: rgba(246, 246, 248, 1);
}

.succ-result {
    width: 1200px;
    height: 120px;
    background: #fff;
    margin: 10px auto;
}

.succ-result .result {
    justify-content: center;
    align-items: center;
    height: 100%;
}

.succ-result .opt {
    height: 50px;
    padding: 0 23px;
    align-items: center;
    margin: 10px auto;
    background: #fff;
}

.tips1 {
    height: 28px;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(34, 34, 34, 1);
    font-family: PingFang SC;
    opacity: 1;
}

.tips2,
.backhome {
    height: 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    color: rgba(24, 147, 252, 1);
    font-family: PingFang SC;
    opacity: 1;
    cursor: pointer;
}

.company_position {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.company_position_info {
    width: calc(32.5% - 48px);
    height: 130px;
    padding: 0 24px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    background: #fff;
}

.job_logo {
    width: 68px;
    height: 68px;
    background: rgba(242, 242, 242, 1);
    margin-top: 20px;
}

.job_information {
    height: 100px;
    width: 168px;
}

.job_information p {
    line-height: 35px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(85, 85, 85, 1);
}

.job_salary {
    min-width: 70px;
    height: 68px;
    margin-top: 20px;
}

.job_salary {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: rgba(253, 78, 64, 1);
    opacity: 1;
}

.job_salary .checkbox {
    display: flex;
    justify-content: flex-end;
    margin-top: 54px;
}

.seeMore {
    width: 340px;
    height: 40px;
    margin: 30px auto;
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(24, 147, 252, 1);
    cursor: pointer;
}

.d-flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.align-items {
    align-items: center;
}

/*---------步骤条样式---end------*/
.text-color {
    color: white;
}

/*步骤条样式修改------------start----------*/
/*is-finish 圆圈颜色*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish {
    color: rgba(24, 147, 252, 1) !important;
    border-color: rgba(24, 147, 252, 1) !important;
}

/*is-finish title 颜色*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__title.is-finish {
    color: #666666;
    font-weight: 700;
    font-size: 14px;
}

/*is-process  title 颜色*/
.el-steps.el-steps--horizontal[data-v-9ebad220] .el-step.is-horizontal.is-center /deep/ .el-step__title.is-process {
    font-size: 14px;
    color: #666666;
    font-weight: 700;
}

/*description 颜色*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__description.is-finish {
    color: #999999;
}

/*is-finish 进程结束，is-process 状态颜色非加粗*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__title.is-process {
    font-size: 14px;
    color: #666666;
    font-weight: 700;
}

/* is-finish line连线粗细*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish /deep/ .el-step__line {
    position: absolute;
    border-color: inherit;
    background-color: rgba(232, 232, 232, 1);
}

/* 已完成 圆圈大小修改*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish /deep/ .el-step__icon {
    z-index: 1;
    width: 16px;
    height: 16px;
    font-size: 12px;
    border: 2px solid;
    background: rgba(24, 147, 252, 1);
}

.el-steps /deep/ .el-step__title {
    font-size: 14px;
    color: #666666;
    font-weight: 700;
}

/* 过度点 圆圈大小修改*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process /deep/ .el-step__icon {
    z-index: 1;
    width: 16px;
    height: 16px;
    border: 2px solid;
    font-size: 12px;
    background: #fff;
    color: #fff !important;
    border-color: rgba(24, 147, 252, 1) !important;
}

/* 未完成 圆圈大小修改*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait /deep/ .el-step__icon {
    z-index: 1;
    width: 16px;
    height: 16px;
    font-size: 12px;
    border: 2px solid;
    background: #fff;
    color: #fff;
    border-color: rgba(24, 147, 252, 1) !important;
}

/*步骤条样式修改------------end----------*/
</style>
